<script setup>
//接收user传过来的数据
import getDate from '@/utils/dateChange.js'
import { ref } from 'vue'
import useMenuStore from '@/store/menu/index.js'

const menuStore = useMenuStore()

//定义user数据接收器
defineProps({
  menuList: {
    type: Array,
    default: () => []
  }
})

//删除用户
const deleteBtn = async (value) => {
  await menuStore.deleteMenu(value)
  menuStore.getMenuTreeAction()
}

//新增
const dialogVisibleShow = ref(false)
const $emits = defineEmits(['dialogVisibleEmits', 'dialogUpdateVisibleEmits'])
const addBtn = () => {
  dialogVisibleShow.value = true
  $emits('dialogVisibleEmits', dialogVisibleShow.value)
}

//修改信息
const dialogEditBtn = (value) => {
  dialogVisibleShow.value = true
  $emits('dialogUpdateVisibleEmits', dialogVisibleShow.value, value)
}
</script>

<template>
  <div class="content">
    <div class="header">
      <el-button @click="addBtn" type="primary" plain>
        <el-icon>
          <Plus />
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>

    <!--    表格内容-->
    <el-table ref="tableRef" row-key="value" :data="menuList" style="width: 100%">
      <el-table-column align="center" property="label" label="菜单名称" width="140px" />
      <el-table-column align="center" property="icon" label="图标" width="80px" />
      <el-table-column align="center" property="orderNum" label="排序" width="60px" />
      <el-table-column align="center" property="perms" label="权限标识" />
      <el-table-column align="center" property="component" label="组件路径" />
      <el-table-column align="center" property="status" label="状态" width="100px">
        <template #default="scope">
          <el-button :type="scope.row.status ? 'primary' : 'danger'" plain>
            {{ scope.row.status ? '启用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" property="createTime" label="创建时间">
        <template #default="scope">
          {{ getDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="240px">
        <template #default="scope">
          <el-button type="primary" text="primary" @click="dialogEditBtn(scope.row)"
            >修改
          </el-button>
          <el-popconfirm @confirm="deleteBtn(scope.row.value)" title="确定要删除吗?">
            <template #reference>
              <el-button type="danger" text="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="less">
.content {
  padding: 0 15px 0 15px;

  .header {
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-top: 20px;
  }
}
</style>
